<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Add custom icons with Markers</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="../../lib/mapbox-gl.js"></script>
    <link href="../../lib/mapbox-gl.css" rel="stylesheet" />
    <script src="../../lib/axios.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .marker {
        display: block;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      let baseDataUrl = `http://${localStorage.getItem(
        "host"
      )}/mapbox-gl-js-offline-examples`;
      axios
        .get(
          baseDataUrl +
            `/resources/styles/${localStorage.getItem(
              "mbtilesStylesName"
            )}.json`
        )
        .then((res) => {
          let data = res.data;
          initMap(data);
        })
        .catch((err) => {
          console.error(err);
        });

      function initMap(style) {
        let map = new mapboxgl.Map({
          container: "map",
          center: [-65.017, -16.457],
          zoom: 5,
          style: style,
        });

        var geojson = {
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              properties: {
                message: "Foo",
                iconSize: [60, 60],
              },
              geometry: {
                type: "Point",
                coordinates: [-66.324462890625, -16.024695711685304],
              },
            },
            {
              type: "Feature",
              properties: {
                message: "Bar",
                iconSize: [50, 50],
              },
              geometry: {
                type: "Point",
                coordinates: [-61.2158203125, -15.97189158092897],
              },
            },
            {
              type: "Feature",
              properties: {
                message: "Baz",
                iconSize: [40, 40],
              },
              geometry: {
                type: "Point",
                coordinates: [-63.29223632812499, -18.28151823530889],
              },
            },
          ],
        };

        // add markers to map
        geojson.features.forEach(function (marker) {
          // create a DOM element for the marker
          var el = document.createElement("div");
          el.className = "marker";
          el.style.backgroundImage =
            "url(http://localhost:8080/mapbox-gl-js-offline-examples/data/images/icon/" +
            marker.properties.iconSize +
            ".jfif";
          el.style.width = marker.properties.iconSize[0] + "px";
          el.style.height = marker.properties.iconSize[1] + "px";
          el.style.backgroundSize = "100%";

          el.addEventListener("click", function () {
            window.alert(marker.properties.message);
          });

          // add marker to map
          new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .addTo(map);
        });
      }
    </script>
  </body>
</html>
